<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索-->
    <el-row>
        <el-col :span="6">
            <el-button type="primary" @click="addAddintos()">批量添加</el-button>
        </el-col>
    </el-row>
    <!--数据展示-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="book.bookId"
                label="编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="book.bookName"
                label="书名"
                width="80">
        </el-table-column>
        <el-table-column
                prop="book.author"
                label="作者"
                width="120">
        </el-table-column>
        <el-table-column
                prop="book.publisher"
                label="出版社"
                width="180">
        </el-table-column>
        <el-table-column
                prop="book.inPrice"
                label="进价"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bookQty"
                label="库存数量"
                width="120">
        </el-table-column>
        <el-table-column
                prop=""
                label="操作"
                width="">
            <template slot-scope="scope">
                <el-button type="success" @click="handlerAdd(scope.$index, scope.row)">添加</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分叶-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=currentPage
            :page-sizes="[5, 10, 15, 20]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
    </el-pagination>
    <!--单个入库-->
    <el-dialog :title="title" width="100%" :visible.sync="dialogFormVisible">
        <el-table
                :data="loadDataAdd"
                border
                style="width: 100%"
        >
            <el-table-column
                    prop="book.bookId"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="book.bookName"
                    label="书名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="book.author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="book.publisher"
                    label="出版社"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="book.inPrice"
                    label="进价"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="bookQty"
                    label="库存数量"
                    width="120">
            </el-table-column>
            <el-table-column label="入库数量" align="center">
                <template slot-scope="scope" width="80">
                    <el-input
                            v-model="addStock"
                            size="mini"
                    >
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handlerAddStock(scope.$index, scope.row)">入库
                    </el-button>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-dialog>
    <!--批量添加-->
    <el-dialog :title="title" width="100%" :visible.sync="dialogBatchAdd">
        <el-table
                ref="menuTree"
                :data="tableDataBt"
                node-key="cameraId"
                show-checkbox
                tooltip-effect="dark"
                style="width: 100%"
                :check-strictly="true"
                :default-checked-keys="nodeChecked"
                efault-expand-all
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="book.bookId"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="book.bookName"
                    label="书名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="book.author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="book.publisher"
                    label="出版社"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="book.inPrice"
                    label="进价"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="bookQty"
                    label="库存数量"
                    width="120">
            </el-table-column>
            <el-table-column label="入库数量" align="center" width="110">
                <template slot-scope="scope">
                    <el-input
                            v-model="scope.row.addStock"
                            size="mini"
                    >
                    </el-input>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <template>
                <el-button
                        size="mini"
                        type="primary"
                        @click="btnBatchSubmit()">确定
                </el-button>
            </template>
            <el-button
                    type="warning"
                    size="mini"
                    @click="toggleSelection()">取消选择
            </el-button>
        </div>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChangeBt"
                @current-change="handleCurrentChangeBt"
                :current-page="currentPageBt"
                :page-sizes="[1,2,3,4,5,10,15,100]"
                :page-size="pageSizeBt"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalBt">
        </el-pagination>
    </el-dialog>


</div>
</body>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                nodeChecked: [],
                tableDataBt: [],
                inputStock: '',
                addStock: '',
                loadDataAdd: [],
                currentPage: 1,
                pageSize: 5,
                total: 0,
                tableData: [],
                searchForm: {},
                form: {},
                title: "",
                dialogFormVisible: false,
                dialogBatchAdd: false,
                cateDate: [],
                tableData1: [],
                addCount: "",
                multipleSelection: [],
                formLabelWidth: '120px'
            }
        },
        created: function () { //初始化方法 类似于jquery  $({})
            this.loadData();
        },
        methods: {
            //定义所有元素绑定的方法
            loadData() {
                //让_this等于当前vue对象
                var _this = this;
                //赋值 axios官网代码
                axios.post('/addinto/listByParam', {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    data: this.searchForm
                })  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            //每页数量发生变化执行方法
            handleSizeChange(val) {
                this.pageSize = val;
                //再次请求，加载数据
                this.loadData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                //再次请求，加载数据
                this.loadData();
            },
            search() {
                //直接调用重新请求，加载数据方法
                this.loadData();
            },
            handlerAdd(index, row) {
                //row 当前行数据
                console.log(index, row);
                //显示对话框
                this.dialogFormVisible = true;
                //指定对话框标题
                this.title = '单个入库';
                this.loadDataAdd = [];
                this.loadDataAdd[0] = row;

            },
            handlerAddStock(index, row) {
                console.log(JSON.stringify(row));
                var _this = this;
                if (this.addStock < 1) {
                    //错误提示信息
                    _this.$message.error('错了哦，不能入库小于一个数量哦！！！');
                    return;
                }
                axios.post('/addinto/insertOne', {
                    addStock: _this.addStock,
                    book: row.book,
                    bookQty: row.bookQty,
                    bookId: row.bookId
                })  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success

                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.addStock = '';
                            //关闭弹框
                            _this.dialogFormVisible = false;

                            //提示添加成功
                            _this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            //重新加载数据
                            _this.loadData();
                        } else {
                            //错误提示信息
                            _this.$message.error('错了哦，这是一条错误消息');
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    });
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            addAddintos(index, row) {
                //显示对话框
                this.dialogBatchAdd = true;
                //指定对话框标题
                this.title = "批量入库";
                //让_this等于当前vue对象
                var _this = this;
                //alert(111);
                //赋值 axios官网代码
                axios.post('/addinto/listByParam', {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    data: this.searchForm
                })  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.tableDataBt = response.data.data.list;
                            _this.totalBt = response.data.data.total;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
                //row 当前行数据 如果是第一行 row={stAddress:'杭州',stType:'总店',stStatus:'1'}
                console.log(index, row);
            },
            btnBatchSubmit(index,row){
                //获取重新选中的节点
                console.log(this.$refs.menuTree.selection)

                /*  let nodes = this.$refs.menuTree.selection;*/
                let nodes = this.multipleSelection;
                /*alert(JSON.stringify(nodes));*/
                //判断至少选中一个节点
                if(nodes.length<1){
                    this.$message.error("至少选中一个节点");
                    return;// 让代码终止运行
                }
                let tempBranch=[];
                /* {jsCount:this.stock,jsTotal:parseInt(this.stock)*parseInt(row.camera.price),
                     jsStatus:1,jsDate:new Date(),jsName:this.staffInfo.sfName,adStatus:2,dgId:row.dgId}*/
                //循环遍历
                for (var i = 0; i < nodes.length; i++) {
                    let branch = nodes[i];
                    if( branch.addStock<1 || branch.addStock==null){
                        //错误提示信息
                        this.$message.error('错了哦，不能入库小于一个数量哦！！！');
                        return;
                    }
                    tempBranch.push(branch);
                }
                console.log("该库存对应新集合为："+JSON.stringify(tempBranch));
                _this =this;
                //执行后台添加方法
                axios.post('/addinto/updateMore',tempBranch).then(function (response) {
                    /*console.log(response);*/
                    if(response.data.code == 200){
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '入库成功!'
                        });
                        //关闭弹框
                        _this.dialogBatchAdd=false;
                        //重新加载数据
                        _this.loadData();

                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error("你错了。。。");
                });
            }
        }

    })
</script>
</html>